<template>
  <div>
    <!-- 2.使用props -->
    <div>
      <span>名称：{{ name }} ---价格{{ price }}</span>
      <!-- 在合适的时间点发出自定义事件 -->
      <button @click="pay">购买</button>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    pay(){
      // 子传父
      // 让子组件告诉父组件我这个商品是多少钱
      // 1.调用this.$emit()
      // 参数1 自定义事件名
      // 参数2 需要传给父级的数据
      this.$emit('pay',this.price)
    }
  },
  // 1.声明props
  // props: ["name", "price"],
  props:{
    // key父传子参数名(子组件的自定义属性)
    // value - 数据类型的效验
    // name：[String，number]
    // price：number
    name:{
      required:true,
      type:String
    },
    price:{
      type:Number,
      // default用来设置自定义属性的默认值
      // 基本数据类型值直接把值写在default的后面
      default:1
      // 如果是引用类型的话，那么需要函数将默认值返回出来
      // default:()=>{}
      // default:()=>[]
    }
  }
};
</script>

<style>
</style>